<template>
	<div class="container" :style="'background: url('+bgImg+');background-position: top;'">
		<div class="main-c">
			<div class="main-head">
				<h2>{{`${siteName}管理系统`}}</h2>
				<!-- <p class="title-1">代理人注册</p> -->
			</div>
			<div class="register-form">
				<el-input placeholder="手机号码" prefix-icon="el-icon-phone" v-model="phone"></el-input>
				<el-input placeholder="密码" type="password" prefix-icon="el-icon-lock" v-model="password"></el-input>
				<el-input placeholder="用户名" prefix-icon="el-icon-user" v-model="name"></el-input>
				<el-input placeholder="邮箱" type="text" prefix-icon="el-icon-message" v-model="email"></el-input>
				<div style="background: white;margin: 0 0 15px 0;line-height: 50px;border-radius: 4px;border: 1px solid #DCDFE6;;">
					<font style="float: left;margin-left: 10px;" color="gray">代理师资格证</font>
					<el-radio style="margin-bottom: 15px;" v-model="hasCard" label="有">有</el-radio>
					<el-radio style="margin-bottom: 15px;" v-model="hasCard" label="无">无</el-radio>
				</div>
				<el-input style="margin-bottom: 15px;" type="textarea" placeholder="请填写擅长领域" v-model="field" :autosize="{ minRows: 4, maxRows: 4}">
				</el-input>
				<el-input placeholder="从业年限" type="text" prefix-icon="el-icon-time" v-model="age"></el-input>
				<el-input style="margin-bottom: 15px;" type="textarea" placeholder="请填写从业经历" v-model="experience" :autosize="{ minRows: 4, maxRows: 4}">
				</el-input>
				<el-input placeholder="预估月处理单数" type="text" prefix-icon="el-icon-message" v-model="num"></el-input>
				<el-row type="flex" class="verification-code-box">
					<el-col :span="24">
						<el-input @keyup.enter.native="register" v-model="verificationCode" prefix-icon="el-icon-key" placeholder="验证码"></el-input>
					</el-col>
					<el-col :span="1"></el-col>
					<el-col :span="10">
						<el-button v-no-more-click:3000 :disabled="btnIsDisabled" type="primary" @click="getVCode()">{{VCodeText}}</el-button>
					</el-col>
				</el-row>
				<p>
					<el-checkbox v-model="checked">我已阅读并同意<a href="javascript:;" @click="dialogVisible=true">相关服务条款和隐私政策</a></el-checkbox>
				</p>
				<el-button v-no-more-click:3000 :disabled="!checked" type="primary" class="btn-register" @click="register">注册</el-button>
			</div>
		</div>
		<el-dialog title="用户协议" center :visible.sync="dialogVisible"></el-dialog>
	</div>
</template>

<script>
	import {
		register
	} from '~/api/adminRegister'
	import {
		validation
	} from './validate'
	import { SITE_NAME, SITE_NAME_PY } from '~/util/config'
	export default {
		head: {
			title: '代理人注册-专利服务管理系统'
		},
		data() {
			return {
				phone: '',
				name: '',
				password: '',
				email: '',
				age: '',
				field: '',
				num: '',
				hasCard: '有',
				experience: '',
				checked: true,
				verificationCode: '',
				VCodeText: '获取验证码',
				dialogVisible: false,
				btnIsDisabled: false,
				bgImg:require('~/assets/img/20191017100106.jpg'),
				siteName: SITE_NAME,
			}
		},
		methods: {
			register() {
				let that = this;
				that.$confirm('您的资料已提交审核，预计48小时内审核完成，审核完成会通知您结果。是否立即登录？', '提示', {
					confirmButtonText: '立即前往',
					cancelButtonText: '暂时不去',
					type: 'success',
					center: true
				})
				.then(() => {
					that.$router.push({
						name: 'admin-prelogin',
						params: {
							phone: that.phone
						}
					})
				})
				.catch(() => {

				});
				//效验
				let validationError = validation({
					phone: that.phone,
					name: that.name,
					password: that.password,
					email: that.email,
					age: that.age,
					field: that.field,
					num: that.num,
					experience: that.experience,
					verificationCode: that.verificationCode
				})
				if (validationError === '') {
					//TODO:验证通过
					register(that.$axios, {
						phone: that.phone,
						name: that.name,
						password: that.password,
						email: that.email,
						work_limit: that.age,
						territory: that.field,
						mon_num: that.num,
						certificate: that.hasCard,
						experience: that.experience,
						code: that.verificationCode
					}).then(res => {
							if (res.data.code == 200) {
								that.$confirm('您的资料已提交审核，预计48小时内审核完成，审核完成会通知您结果。是否立即登录？', '提示', {
									confirmButtonText: '立即前往',
									cancelButtonText: '暂时不去',
									type: 'success',
									center: true
								}).then(() => {
									that.$router.push({
										name: 'admin-prelogin',
										params: {
											phone: that.phone
										}
									})
								})
								.catch(() => {

								});
							}else {
							that.$message({
								message: res.data.message,
								type: 'error'
							})
						}
					})
			} else {
				that.$message({
					message: validationError,
					type: 'warning'
				});
			}
		},
		getVCode() {
			let that = this;
			let timer;
			if ((/^1[3456789]\d{9}$/.test(that.phone))) {
				let num = 60;
				that.btnIsDisabled = true;
				timer = setInterval(function() {
					that.VCodeText = num + "秒后可重新发送";
					num -= 1;
					if (num < 0) {
						that.VCodeText = "获取验证码";
						that.btnIsDisabled = false;
						clearInterval(timer);
					}
				}, 1000);
				that.$axios.post('/api/captcha', {
					phone: that.phone,
					type: 1 //1:注册；2：登录、验证。
				}).then(res => {
					if (res.data.code == 200) {
						that.$message({
							message: "验证码发送成功！",
							type: 'success'
						});
					} else {
						clearInterval(timer);
						that.VCodeText = "获取验证码";
						that.btnIsDisabled = false;
						that.$message({
							message: res.data.message,
							type: 'error'
						});
					}
				})
			} else {
				that.$message({
					message: "手机号不能为空且格式不能有误",
					type: 'warning'
				});
			}
		}
	},
	mounted() {
		if (this.$route.query.from) {
			this.$message({
				message: '您还没有登录',
				type: 'warning'
			});
		}
	}
	}
</script>


<style lang="less">
	.container {
		margin: 0 auto;
		min-height: 100vh;
		background-color: #f2f2f2;

		.main-c {
			width: 100%;
		}

		.main-c .main-head,
		.register-form {
			width: 375px;
			margin: 0 auto;
			text-align: center;
			padding-top: 20px;
		}

		.main-head {
			height: 109px;
		}

		.main-head h2 {
			font-weight: 300;
			font-size: 30px;
			color: #000;
			margin: 0;
			padding-top: 20px;
		}

		.main-head .title-1 {
			font-weight: 300;
			color: #999;
		}

		.main-c .register-form {
			// height: 200px;
		}

		.register-form .el-input {
			margin-bottom: 15px;
		}

		.register-form .btn-register {
			width: 100%;
			margin-bottom: 30px;
		}
	}
</style>
